/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */
.triangle-isosceles {
	position: relative;
	padding: 15px;
	margin: 0;
	color: #000;
	background: #f3961c;
	/* default background for browsers without gradient support */
	/* css3 */
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835),
		to(#f3961c));
	background: -moz-linear-gradient(#f9d835, #f3961c);
	background: -o-linear-gradient(#f9d835, #f3961c);
	background: linear-gradient(#f9d835, #f3961c);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */
.triangle-isosceles.top {
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3961c),
		to(#f9d835));
	background: -moz-linear-gradient(#f3961c, #f9d835);
	background: -o-linear-gradient(#f3961c, #f9d835);
	background: linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */
.triangle-isosceles.left {
	margin-left: 50px;
	background: #f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */
.triangle-isosceles.right {
	margin-right: 50px;
	background: #f3961c;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
	content: "";
	position: absolute;
	bottom: -15px; /* value = - border-top-width - border-bottom-width */
	left: 50px; /* controls horizontal position */
	border-width: 15px 15px 0;
	/* vary these values to change the angle of the vertex */
	border-style: solid;
	border-color: #f3961c transparent;
	/* reduce the damage in FF3.0 */
	display: block;
	width: 0;
}

/* Variant : top
------------------------------------------ */
.triangle-isosceles.top:after {
	top: -15px; /* value = - border-top-width - border-bottom-width */
	right: 50px; /* controls horizontal position */
	bottom: auto;
	left: auto;
	border-width: 0 15px 15px;
	/* vary these values to change the angle of the vertex */
	border-color: #f3961c transparent;
}

/* Variant : left
------------------------------------------ */
.triangle-isosceles.left:after {
	top: 16px; /* controls vertical position */
	left: -50px; /* value = - border-left-width - border-right-width */
	bottom: auto;
	border-width: 10px 50px 10px 0;
	border-color: transparent #f3961c;
}

/* Variant : right
------------------------------------------ */
.triangle-isosceles.right:after {
	top: 16px; /* controls vertical position */
	right: -50px; /* value = - border-left-width - border-right-width */
	bottom: auto;
	left: auto;
	border-width: 10px 0 10px 50px;
	border-color: transparent #f3961c;
}

html {
	height: 100%; /* fix height to 100% for IE */
	max-height: 100%; /* fix height for other browsers */
	padding: 0; /*remove padding */
	margin: 0; /* remove margins */
	border: 0; /* remove borders */
	background: #fff; /*color background - only works in IE */
	font-size: 80%; /*set default font size */
	font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
	/* set default font */
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden; /*get rid of scroll bars in IE */
	/* */
}

body {
	height: 100%; /* fix height to 100% for IE */
	max-height: 100%; /* fix height for other browsers */
	overflow: hidden; /*get rid of scroll bars in IE */
	padding: 0; /*remove padding */
	margin: 0; /* remove margins */
	border: 0; /* remove borders */
}

#header {
	background: #eee;
	line-height: 60px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}

#header h1 {
	margin: 0;
}

#content {
	display: block; /* set up as a block */
	overflow: auto; /* add scroll bars as required */
	position: absolute;
	margin-top: 62px;
	width: 100%;
	max-height: 80%;
}

#footer {
	background: #eee;
	line-height: 60px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
}

.timeContainer {
	width: 100%;
	text-align: center; 
}

.bubble {
	margin-top: 10px;
	margin-bottom: 10px;
}